<template>
	<div style="border: 1px solid #eee;margin: 0 20px;">
		<div style="margin-top:20px ;margin-left: 20px;">
			<el-button type="primary" icon="el-icon-edit" @click="linkToAddTicket">新增票种</el-button>
		</div>
		<div>
			<el-table :data="tableData" row-key="id"   border fit highlight-current-row style="width: 100%;margin-top: 20px;">
			 	<el-table-column align="center" label="票种名称">
			        <template slot-scope="scope">
			          <span>{{scope.row.ticketName}}</span>
			        </template>
		      	</el-table-column>
		      	<el-table-column align="center" label="票种类型">
			        <template slot-scope="scope">
			          <span>{{scope.row.ticketType}}</span>
			        </template>
			    </el-table-column>
		      	<el-table-column align="center" label="票总数">
			        <template slot-scope="scope">
			          <span>{{scope.row.ticketNum}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="价格">
			        <template slot-scope="scope">
			          <span>{{scope.row.price}}</span>
			        </template>	
			    </el-table-column>
			    <el-table-column  align="center" label="是否审核">
			        <template slot-scope="scope">
			          <span>{{scope.row.status}}</span>
			        </template>
			    </el-table-column>
			     <el-table-column  align="center" label="操作">
			        <template slot-scope="scope">
	                    <a :href="'#/activities/editTicket/'+scope.row.id">编辑</a><b @click="deleteTicket">删除</b>
	                </template>
			    </el-table-column>
		   </el-table>
		</div>
	</div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      isShowAdd: false, // 是否显示增加票种组件
      tableData: [
        {
          id: 0,
          ticketName: '票种名称啊',
          ticketType: '免费票',
          ticketNum: 6,
          price: '0.00',
          status: '否'
        },
        {
          id: 1,
          ticketName: '名称2',
          ticketType: '收费票',
          ticketNum: 6,
          price: '10.00',
          status: '否'
        }
      ]
    }
  },
  methods: {
    linkToAddTicket() {
      this.$router.push({ path: '/activities/createTicket' })
    },
    deleteTicket() {
      this.$confirm('此操作将永久删除该票种, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
	a,b{
		padding: 0 5px;
	}
	a:hover {
		color: #409EFF;
	}
	b:hover {
		color: #409EFF;
	}
	b{
		cursor: pointer;
		font-weight: 500;
	}
</style>